<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>GMIP</title>
	<link rel="stylesheet" type="text/css" href="easyui.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body style="margin: 0 auto;padding: 0;">
	<div id="cc" class="easyui-layout" style="height:700px;">
	    <div data-options="region:'north',split:true" style="height:230px;">
	    	<div class="easyui-layout" data-options="fit:true">
	    		<div data-options="region:'north',href:'header_2.html'" style="height:92px;"></div>
	    		<div data-options="region:'center',fit:true, href:'testingnav.html'" 
	    		style="height:60px;padding-top: 2px">
	    		</div>
                <div data-options="region:'south',href:'workreporting.html'" style="height:93px;padding-left: 125px"></div>
            </div>
	    </div>
	    <div data-options="region:'south',split:true, href:'footer.html'" style="height:230px;"></div>
	    <div data-options="region:'west',href:'left_nav.html',split:true" style="width:226px;">

            </div>
	    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
	    	<div style="height:600px;border:1px solid red;"></div>
        </div>
    </div>
	<script type="text/javascript">
        $(function(){
            $('#cc').layout();
            setCenterHeight();

        });
        
        function setCenterHeight(){
            var c = $('#cc');
            var p = c.layout('panel','center'); // get the center panel
            var oldHeight = p.panel('panel').outerHeight();
            //alert(oldHeight);
            p.panel('resize', {height:'auto'});
            var newHeight = p.panel('panel').outerHeight();
            //alert(c.height());
            var cNewHeight = newHeight - oldHeight;
            //return cNewHeight;
            
            c.height(c.height() + newHeight - oldHeight);
            c.layout('resize');
        }
        function setWestHeight(){
            var c = $('#cc');
            var p = c.layout('panel','west'); // get the west panel
            var oldHeight = p.panel('panel').outerHeight();
            //alert(oldHeight);
            p.panel('resize', {height:'auto'});
            var newHeight = p.panel('panel').outerHeight();
            //var wNewHeight = newHeight - oldHeight;
            //return wNewHeight;
            //alert(newHeight);
            //alert(c.height());
            c.height(c.height() + newHeight - oldHeight);
            c.layout('resize');
        }
        
    </script>
</body>
</html>